<template>
  <view class="telLogin">
    <view class="telLogin_image">
      <image src="../../static/img/dybs.png" mode="widthFix"/>
    </view>
    <view class="telLogin_content">
      <view class="telLogin_content_box">
        <input v-model="account" type="text" :focus="true" class="telLogin_content_box_input" placeholder="请输入登录账号">
      </view>
    </view>
    <view class="telLogin_content">
      <view class="telLogin_content_box">
        <input v-model="password" type="text" :focus="true" :password="iconMark" class="telLogin_content_box_input" placeholder="请输入密码">
      </view>
      <view class="telLogin_content_getCode" v-on:click="changeIcon">
        <i class="show iconfont" :class="iconMark ? 'icon-yanjing_yincang' : 'icon-yanjing_xianshi'"></i>
      </view>
    </view>
	<!--	记住账号密码 -->
	<view class="remember-psw-container">
	    <label class="remember-psw">
	        <checkbox 
	            value="psw" 
	            :checked='rememberPsw' 
	            @tap="rememberPsw = !rememberPsw" 
	            color="#09CC86"
	            class="checkbox"
	        />记住账号密码
	        <text class="checkbox-label"></text>
	    </label>
	</view>

    <view class="telLogin_btn">
      <button type="primary" class="telLogin_btn_submit" @click="login">登录</button>
    </view>
    <view class="telLogin_type">
      <view class="telLogin_type_font">
        <view class="telLogin_type_font_part" >
        </view>
        <view class="telLogin_type_font_part" v-if="false">
          <font v-if="type == 'password'">忘记密码</font>
        </view>
      </view>
    </view>
   
  </view>
</template>
<script>
	import {login} from './@/utils/api.js'
import util from "@/vtuzx/utils/vtuzx-util";
export default {
 
  data() {
    return {
		rememberPsw: true,
      needLogin: false,
      account: '',
      password: '',
      iconMark: true,
	  code : '',
	  isWeixin: false
    }
  },
  onShow() {
  	this.login()
  },
  onLoad() {
  	
  },
  mounted(){

  	// 检查本地存储中是否有记住的用户名和密码
  	const savedUsername = uni.getStorageSync('userName');
  	const savedPassword = uni.getStorageSync('userPsw');
  	if (savedUsername && savedPassword) {
	
  	  this.account = savedUsername;
  	  this.password = savedPassword;
  	  this.remember = true;
  	}
  },

  methods: {
	 // getUserInfo() {
		//  console.log("调用后端接口")
	 //    wxLogin(this.code).then((res) => {
		// 	console.log(res)
		// 	alert(res.data.getUserInfo)
		//  uni.setStorageSync("userInfo",res.data.getUserInfo)
	 //    });
	 // },
	
	  
    /**
     *密码显示替换Icon
    
    */
	changeIcon() {
	  let self = this
	  self.iconMark = self.iconMark == true ? false : true
	},
    /**
     * 登录
     */
      login() {

      let self = this
      if (!self.account) {
        uni.showToast({
          title: '请输入登录账号',
          icon: 'none'
        })
        return
      }
      if (!self.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
	  login({username : this.account,password : this.password}).then(res => {
		  //存储token
		  // localStorage.setItem('token',res.data.token)
		 uni.setStorageSync('token',res.data.token)
		 //获取用户信息
		/* getUserInfo({}).then(res => {
			 console.log(res)
		 }) */
		 // 核心部分在这里
		 	// 仅在登录成功后存储账号和密码
		 if (this.rememberPsw) {  // 请确保你定义了 rememberPsw 变量
		 	uni.setStorageSync('userName', this.account);
		 	uni.setStorageSync('userPsw', this.password); // 此处也不可存储加密之后的密码
		 }else {
		 	// 如果用户未勾选“记住我”，清除本地存储中的用户名和密码
		 	uni.removeStorageSync('userName');
		 	uni.removeStorageSync('userPsw');
		 }		
		 uni.navigateTo({
		 	 	url:'/pages/menu/menu'
		 	 })
	  }).catch(res =>{
		  // console.log(res.data)
		  if (res.data.data.status != 200 ){
			  uni.showToast({
			  	title:'账号密码错误',
				icon:'none'
			  })
		  }
	  })

    }
  }
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.telLogin {
  .telLogin_top {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #00aaff;
    font-size: 20px;
  }

  .telLogin_image {
    padding-left: 20px;
    padding-top: 100px;
    padding-bottom: 80px;

    image {
      width: 200px;
    }
  }

  .telLogin_title {
    padding: 10px 20px 40px 20px;
    font-size: 22px;
    font-weight: bold;
  }

  .telLogin_content {
    display: flex;
    align-items: center;
    margin: 0px 20px 30px 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f6f6f6;
    height: 30px;
    font-size: 15px;

    .telLogin_content_addressTel {
      display: flex;
      align-items: end;
      justify-content: center;
      margin-right: 10px;
    }

    .telLogin_content_box {
      flex: 1;
      margin-right: 20px;

      &.password {
        margin-right: 10px;

        .telLogin_content_box_input {
          width: 100%;
          font-size: 15px !important;
        }
      }

      .telLogin_content_box_input {
        width: calc(100% - 40px);
        font-size: 15px !important;
      }
    }

    .telLogin_content_delete {
      width: 20px;

      .telLogin_content_delete_btn {
        color: #e5e5e5;
        background-color: #ffffff !important;

      }
    }

    .telLogin_content_getCode {
      width: 20px;
      margin-left: 10px;
      color: $font-hc;
    }
  }

  .telLogin_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    .telLogin_btn_submit {
      width: calc(100% - 40px);
      border-radius: 5px !important;
    }
  }

  .telLogin_type {
    width: calc(100% - 40px);
    padding: 0 20px;

    .telLogin_type_font {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .telLogin_type_font_part{
        font{
          color: #00aaff;
          font-size: 14px;
        }
      }
    }
  }

  .telLogin_foot {
    position: fixed;
    bottom: 50px;
    width: 100%;

    .telLogin_foot_article {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      margin-bottom: 5px;

      .telLogin_foot_article_text {
        margin-right: 5px;
      }

      .telLogin_foot_article_book {
        color: $primary;
      }
    }

    .telLogin_foot_content {
      font-size: 12px;

      .telLogin_foot_content_text {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
